<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="theme-color" content="#39b6ff">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0"  />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_738716_000mtvubl1pxjo.css">
    <title>zx-app</title>
    <style type="text/css">
      #app {
        max-width: 750px;
        margin: 0 auto;
      }
      #loading {
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 99999;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      #loading .wave {
        width: 20px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000;
        -webkit-perspective: 1000;
        transform: scale3d(0.4, 0.4, 0.4);
      }
      #loading .wave .dot {
        width: 20px;
        height: 5px;
        background-color: #64b5d3;
        display: inline-block;
        vertical-align: middle;
        margin: 14px auto;
        position: relative;
        transform: scale(0.6);
      }
      #loading .wave .dot:before,
      #loading .wave .dot:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        top: -10px;
        left: -1px;
      }
      #loading .wave .dot:before {
        animation: Before 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
        animation-fill-mode: forwards;
        background-color: #19cbeb;
        box-shadow: inset 2px 2px 5px #38bddf 10;
      }
      #loading .wave .dot:after {
        animation: After 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
        animation-fill-mode: forwards;
        background-color: #009dff;
        box-shadow: inset 2px 2px 5px #20a9ff;
      }
      
      #loading .loading-container {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border: 1px solid rgba(0, 157, 255, 0.3); */
        box-sizing: border-box;
        animation: geneRotate 3s linear 0s infinite;
        -moz-animation: geneRotate 3s linear 0s infinite; /* Firefox */
        -webkit-animation: geneRotate 3s linear 0s infinite; /* Safari 和 Chrome */
      }

      #loading .wave .dot:nth-child(1):before,
      #loading .wave .dot:nth-child(1):after {
        animation-delay: -1.71s;
      }
      #loading .wave .dot:nth-child(2):before,
      #loading .wave .dot:nth-child(2):after {
        animation-delay: -3.42s;
      }
      #loading .wave .dot:nth-child(3):before,
      #loading .wave .dot:nth-child(3):after {
        animation-delay: -5.13s;
      }
      #loading .wave .dot:nth-child(4):before,
      #loading .wave .dot:nth-child(4):after {
        animation-delay: -6.84s;
      }
      #loading .wave .dot:nth-child(5):before,
      #loading .wave .dot:nth-child(5):after {
        animation-delay: -8.55s;
      }
      #loading .wave .dot:nth-child(6):before,
      #loading .wave .dot:nth-child(6):after {
        animation-delay: -10.26s;
      }
      .circleBox {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .circleBox .circle{
        width: 80px;
        height: 80px;
        border-radius:50%;
        position:absolute ;
        top:0;
        left: 0;
        border: 1px solid #009dff;
        box-sizing: border-box;
      }
      .circle1{
          animation: myfirst 3s linear 0s infinite;
          -moz-animation: myfirst 3s linear 0s infinite; /* Firefox */
          -webkit-animation: myfirst 3s linear 0s infinite; /* Safari 和 Chrome */
        }
      @keyframes myfirst{
        0% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity:0.2;
        }
        50% {
          -webkit-transform: scale(2);
          transform: scale(2);
          opacity: 0;
        }
        100% {
          -webkit-transform: scale(2);
          transform: scale(2);
          opacity: 0;
        }
      }
      @keyframes geneRotate{
        0% {
          -webkit-transform: rotateZ(0);
          transform: rotateZ(0);
        }
        60% {
          -webkit-transform: rotateZ(0);
          transform: rotateZ(0);
        }
        100% {
          -webkit-transform: rotateZ(360deg);
          transform: rotateZ(360deg);
        }
      }
      @keyframes Before {
        0% {
          left: -40px;
          z-index: 10;
        }
        25% {
          transform: scale(1.4);
          z-index: 10;
        }
        50% {
          left: 40px;
          z-index: 1;
        }
        75% {
          background-color: #41c9eb;
          box-shadow: inset 2px 2px 5px #92d9fa;
          transform: scale(0.6);
          z-index: 1;
        }
        100% {
          left: -40px;
          z-index: 1;
        }
      }
      @keyframes After {
        0% {
          left: 40px;
          z-index: 1;
        }
        25% {
          background-color: #98d7ff;
          box-shadow: inset 2px 2px 5px #97d7ff;
          transform: scale(0.6);
          z-index: 1;
        }
        50% {
          left: -40px;
          z-index: 10;
        }
        75% {
          transform: scale(1.4);
          z-index: 10;
        }
        100% {
          left: 40px;
          z-index: 10;
        }
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but zx-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="loading">
      <div class="loading-container">
        <div class="wave">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <!-- <div class="dot"></div> -->
        </div>
        <div class="circleBox">
          <div class="circle circle1"></div>
        </div>
      </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
        var ua = window.navigator.userAgent
        var originalHeight = document.documentElement.clientHeight || document.body.clientHeight
        document.body.style.height = originalHeight + 'px'
        window.addEventListener('resize', function () {
          var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (originalHeight > resizeHeight && /MiuiBrowser/ig.test(ua)) {
            // Android 键盘收起后操作
            // 修复小米浏览器下，输入框依旧被输入法遮挡问题
            document.body.style.marginBottom = '32px';
          } else {
            document.body.style.marginBottom = 0
          }
          // originHeight = resizeHeight;
        }, false)
  </script>
</html>
